<template>
  <el-row>
    <el-col :span="4">
      <el-card style="margin-right: 15px;">
        <template #header>
          <el-text>角色信息</el-text>
        </template>
        <el-radio v-for="role in roules" :label="role.id" v-model="roleId">{{ role.name }}</el-radio>
      </el-card>
    </el-col>

    <el-col :span="20">
      <div class="search">
        <el-form :inline="true">
          <el-form-item label="关键字" prop="name">
            <el-input placeholder="菜单名称" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="">搜索</el-button>
            <el-button @click.stop="">重置 </el-button>
            <el-button type="primary" @click="">全选</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table :data="menus" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
        <el-table-column prop="name" label="菜单名称" width="400" />
        <el-table-column prop="type" label="菜单权限" min-width="250">
          <template #default="scope">
            <el-checkbox-group>
              <el-checkbox label="show">显示</el-checkbox>
              <el-checkbox label="add">新增</el-checkbox>
              <el-checkbox label="update">更新</el-checkbox>
              <el-checkbox label="delete">删除</el-checkbox>
            </el-checkbox-group>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="操作" width="250">
          <template #default="scope">
            <el-checkbox label="all">全选</el-checkbox>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { IRole } from "@/api/role/type"
import { getSysRole } from "@/api/role/index"
import { getSysMenu } from '@/api/menu';
import { IMenu } from '@/api/menu/type';

const menus = ref<IMenu[]>([]);
const searchMenu = async () => {
  const sysMenuData = await getSysMenu({ isVisible: true });
  menus.value = sysMenuData.data;
};
searchMenu();
const roules = ref<IRole[]>([]);
const roleId = ref<number | undefined>();
watch(roleId, (n, o) => {

})

const init = async () => {
  var data = (await getSysRole()).data;
  roules.value = data;
}
init();
</script>

<style>
.el-radio {
  display: block;
}
</style>